<template>
  <div class="q-pa-xs row items-start q-gutter-sm">

    <q-table class="full-width" :rows="store.筛选开奖结果('澳门')" :columns="columns" row-key="编号" binary-state-sort
      :rows-per-page-options="[0]" separator="cell" style="height: 40vh;">
      <template v-slot:top>
        <div class=" q-table__title">澳门</div>
        <!-- {{ 表单 }} -->
        <q-space></q-space>
        <q-btn color="positive " icon="add" dense size="sm" label="填开奖结果" @click="新增('澳门')" outline />
      </template>
      <template v-slot:header="props">
        <q-tr :props="props">
          <q-th auto-width />
          <q-th v-for="col in props.cols" :key="col.name" :props="props">
            {{ col.label }}
          </q-th>
        </q-tr>
      </template>
      <template v-slot:body="props">
        <q-tr :props="props">
          <q-td auto-width class="q-gutter-xs">
            <q-btn color="positive " icon="zoom_in" dense @click="update开奖结果(props.row.id)" size="sm" outline/>
            <q-btn color="positive " icon="clear" dense size="sm" @click="删除('澳门', props.row)" />
          </q-td>
          <q-td v-for="col in props.cols" :key="col.name" :props="props">
            {{ col.value }}
          </q-td>
        </q-tr>
      </template>
    </q-table>

    <q-dialog v-model="是否弹窗" transition-show="scale" transition-hide="scale" @before-hide="隐藏窗口前('澳门')">
      <q-card style="width: 100vw">
        <q-card-section>
          <!-- <div class="text-h6">选择日期</div> -->
          {{ 表单[当前地区] }}
        </q-card-section>
        <q-card-section class="q-pt-none 表单主体">
          <div class="q-col-gutter-xs row">
            <q-input class="col-8" v-model="表单.开奖日期" outlined readonly label="开奖日期" label-color="orange">
              <template v-slot:append>
                <q-btn icon="event" round color="primary" push>
                  <q-popup-proxy cover transition-show="scale" transition-hide="scale">
                    <q-date v-model="表单.开奖日期" mask="YYYY年MM月DD日">
                      <div class="row items-center justify-end q-gutter-sm">
                        <q-btn label="今天" color="secondary" @click="指定为今天(当前地区)" push />
                        <q-btn label="OK" color="primary" push v-close-popup />
                      </div>
                    </q-date>
                  </q-popup-proxy>
                </q-btn>
              </template>
            </q-input>
            <q-select v-for="i in 6" class="col-6" :model-value="表单[`平${i}`]" outlined hide-selected behavior="menu"
              :options="options" @input-value="setModel($event, i, 当前地区)" :label="`平`" label-color="orange" use-input
              fill-input @filter="filterFn" :key="`平${i}`">
              <template v-slot:append>
                <!-- <q-btn label="OK" color="primary" push v-close-popup /> -->
                {{ 表单[`平${i}_肖`] }}
              </template>
            </q-select>
            <q-select class="" :model-value="表单.特" outlined hide-selected behavior="menu" :options="options"
              @input-value="setModel特($event, i, 当前地区)" label="特" label-color="orange" use-input fill-input
              @filter="filterFn" key="特">
              <template v-slot:append>
                <!-- <q-btn label="OK" color="primary" push v-close-popup /> -->
                {{ 表单[`特_肖`] }}
              </template>
            </q-select>
            <!-- {{ 表单.特_肖 }} -->
          </div>

        </q-card-section>
        <q-card-actions align="right" class="">
          <q-btn color="secondary" label="取消" v-close-popup push outline />
          <q-btn color="positive" label="确定" v-close-popup push outline @click="确定" />
        </q-card-actions>
      </q-card>
    </q-dialog>

    <q-table class="full-width" :rows="store.筛选开奖结果('香港')" :columns="columns" row-key="编号" binary-state-sort
      :rows-per-page-options="[0]" separator="cell" style="height: 40vh;">
      <template v-slot:top>
        <div class=" q-table__title">香港</div>
        <q-space></q-space>
        <q-btn color="positive " icon="add" dense size="sm" label="填开奖结果" @click="新增('香港')" outline />
      </template>
      <template v-slot:header="props">
        <q-tr :props="props">
          <q-th auto-width />
          <q-th v-for="col in props.cols" :key="col.name" :props="props">
            {{ col.label }}
          </q-th>
        </q-tr>
      </template>
      <template v-slot:body="props">
        <q-tr :props="props">
          <q-td auto-width>
            <q-btn color="positive " icon="zoom_in" dense @click="update开奖结果(props.row.id)" size="sm" outline/>
            <q-btn color="positive " icon="clear" dense size="sm" @click="删除('香港', props.row)" />
          </q-td>
          <q-td v-for="col in props.cols" :key="col.name" :props="props">
            {{ col.value }}
          </q-td>
        </q-tr>
      </template>
    </q-table>
  </div>
</template>
<script setup>
import { useStore } from '../stores/store'
import { ref, reactive, computed, watch, onMounted, onBeforeUnmount, onUnmounted, watchEffect } from "vue";
import { 清空对象的二级对象 ,清空对象} from "../components/hooks.js";

const store = useStore()
const 表单 = store.当前开奖结果

function update开奖结果(id) {
  let kk=store.找对应开奖结果byId(id)
  for (let key in kk) {
    表单[key] = kk[key];
  }
  是否弹窗.value=true
}
// watch(id,()=>{
//   console.log("id你变了");
//   if (id==="") {

//   }
// })

// const 表单 = reactive(空表单)
function setModel(val, i, 地区) {
  // store.update当前开奖结果(val, i, 地区)
  表单[`平${i}`] = val
}
function setModel特(val, i, 地区) {
  表单.特 = val
}

function filterFn(val, update, abort) {
  update(() => {
    const needle = val;
    options.value = aoptions.filter(
      (v) => v.indexOf(needle) > -1
    );
  });
}

const aoptions = store.待选号码
const options = ref(aoptions);
// onMounted(() => {
//   store.读取开奖结果缓存()
// })

const 弹窗 = reactive({
  澳门: false,
  香港: false,
})
const 是否弹窗 = ref(false)

function 隐藏窗口前(地区) {
  console.log('隐藏ing')
  // 表单[地区].开奖日期 = store.今天日期()
}
function 指定为今天(地区) {
  表单.开奖日期 = store.今天日期()
}

const 当前地区 = ref('')

function 新增(地区) {
  当前地区.value = 地区
  表单.地区 = 地区
  表单.开奖日期 = store.今天日期()
  console.log('store.今天日期()', store.今天日期())
  是否弹窗.value = true
}
function 删除(地区, row) {
  console.log('row', row)
  store.delete开奖结果(地区, row)
}
function 确定() {
  let 地区 = 当前地区.value
  // store.开奖结果[地区].push(表单[地区])
  store.update开奖结果(地区, 表单)
  // 清空对象的二级对象(表单)
  清空对象(表单)
  store.读取开奖结果缓存()
}

const columns = [
  // {
  //   name: "id",
  //   align: "center",
  //   label: "id",
  //   field: "id",
  //   sortable: true,
  // },
  {
    name: "开奖日期",
    align: "center",
    label: "开奖日期",
    field: "开奖日期",
    sortable: true,
  },
  {
    name: "平1",
    align: "center",
    label: "平1",
    field: "平1",
  },
  {
    name: "平1_肖",
    align: "center",
    label: "肖",
    field: "平1_肖",
  },
  {
    name: "平2",
    align: "center",
    label: "平2",
    field: "平2",
  },
  {
    name: "平2_肖",
    align: "center",
    label: "肖",
    field: "平2_肖",
  },
  {
    name: "平3",
    align: "center",
    label: "平3",
    field: "平3",
  },
  {
    name: "平3_肖",
    align: "center",
    label: "肖",
    field: "平3_肖",
  },
  {
    name: "平4",
    align: "center",
    label: "平4",
    field: "平4",
  },
  {
    name: "平4_肖",
    align: "center",
    label: "肖",
    field: "平4_肖",
  },
  {
    name: "平5",
    align: "center",
    label: "平5",
    field: "平5",
  },
  {
    name: "平5_肖",
    align: "center",
    label: "肖",
    field: "平5_肖",
  },
  {
    name: "平6",
    align: "center",
    label: "平6",
    field: "平6",
  },
  {
    name: "平6_肖",
    align: "center",
    label: "肖",
    field: "平6_肖",
  },
  {
    name: "特",
    align: "center",
    label: "特",
    field: "特",
  },
  {
    name: "特_肖",
    align: "center",
    label: "肖",
    field: "特_肖",
  },
];
</script>

